<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ会员</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.h-head .h-head-container .h-head-list ul li{
				display: inline-block;
				list-style: none;
				margin: 0 10px;
			}
			.h-head .h-head-container .h-head-list ul li a{
				display: inline-block;
				text-decoration: none;
				color: #fff;
				list-style: none;
			}
			.h-head .h-head-container .h-head-list ul li a:hover{
				color: blue;
			}
			.h-head .h-head-container .h-head-container-logo{
				display: inline-block;
				width: 145px;
				height: 90px;
			}
			.h-head .h-head-container{
				width: 1140px;
				height: 90px;
				margin: 0 auto;
				background-color: #666;
				background-image: url(img/logo.png);
				background-repeat: no-repeat;
				background-size: 145px 90px;
				background-position: 38px 0;
			}
			.h-head-list{
				height: 34px;
				line-height: 90px;
				display: inline-block;
				margin-left: 224px;
			}
			.h-head-status{
				margin-top: 10px;
				display: inline-block;
			}			
			.h-head-status .h-head-status-userinfo{
				display: inline-block;
				font-size: 16px;
				font-weight: 400;
				border: 1px solid #FAD65C;
				border-radius: 30px;
				margin: 0 10px 0 20px;
				width: 80px;
				height: 30px;
				text-align: center;
				padding-top: 10px;
			}
			.h-head-status .h-head-status-btn{
				border: 1px solid #FAD65C;
				border-radius: 30px;
				width: 140px;
				height: 30px;
				text-align: center;
				padding-top: 10px;
				display: inline-block;
			}	
			.h-head-status-userinfo:hover,.h-head-status-btn:hover{
				background-color: #FAD65C;
			}
			img{
				display: inline-block;
				width:145px; 
				height:34px;
				margin-top: 30px;
				/*line-height: 90px;*/
			}
		</style>
	</head>
	<body>
		<header class="h-head">
			<div class="h-head-container">
				<!--<a href="#" class="h-head-container-logo"><img src="logo.png" alt="QQ会员" /></a>-->
				<nav class="h-head-list">
					<ul>
						<li><a href="#">功能特权</a></li>
						<li><a href="#">游戏特权</a></li>
						<li><a href="#">生活特权</a></li>
						<li><a href="#">会员活动</a></li>
						<li><a href="#">成长体系</a></li>
						<li><a href="#">年费专区</a></li>
						<li><a href="#">超级会员</a></li>
					</ul>
				</nav>
				<div class="h-head-status">
					<div class="h-head-status-userinfo">
						<span>登录</span>
					</div>
					<div class="h-head-status-btn">
						<span>开通超级会员</span>
					</div>
				</div>
			</div>
		</header>
	</body>
</html>
